<template>
  <div class="flex flex-column" style="height: 100%">
    <div v-show="formAge" class="flex-sub">
      <div class="hm-select-area bg-white font-14">
        <el-row>
          <el-col :span="12"
            ><el-input
              class="hta-input"
              placeholder="搜索关键字"
              v-model="searchObj.parking_lot_name"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" @click="getParkingLotList">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-button
              class="hta-btn-export border-blue"
              type="primary"
              @click.native="addNotice"
              >添加</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        v-loading="parkLoading"
      >
        <el-tab-pane label="我的停车场" name="first">
          <div v-for="(item, index) in parkingLotList" :key="index">
            <div class="vfor bg-white">
              <div class="center">{{ item.parking_lot_name }}</div>
              <img
                v-if="item.img"
                :src="item.img[0].img_url"
                @error="nofind"
                width="99%"
                height="150"
              />
              <!-- <img v-if="!item.img" src='../../assets/images/login_bg.png' width="99%" height="150"/> -->
              <p class="addres">位置:{{ item.parking_lot_address }}</p>
              <p class="addres">
                <!-- 车位数:{{ item.count}} -->
                <span class="addre" @click="detailInfo(item)">详情</span>
              </p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--添加、详情    -->
    <el-dialog
      :title="titles"
      :visible.sync="dialogVisible"
      width="65%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        v-show="firstpage"
        :model="addForm"
        ref="addForm"
        label-width="120px"
      >
        <el-row>
          <!-- <el-form-item>  
            <el-radio-group v-model="addForm.parking_lot_type" >
              <el-radio label="PARKING_LOT">停车场</el-radio>
              <el-radio label="COMMUNITY">小区停车</el-radio>
              <el-radio label="ROADSIDE">路边停车</el-radio>
            </el-radio-group>
          </el-form-item> -->
        </el-row>
        <!-- <el-row>
          <el-col :span="8">
            <el-form-item label="收取分红比例为:" style="margin-left: 75px">
              <el-input
                type="text"
                v-model="addForm.proportion"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="iconstop">
            <div>%</div>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="11">
            <el-form-item label="名称" prop="parking_lot_name">
              <el-input
                type="text"
                v-model="addForm.parking_lot_name"
                placeholder="请输入停车场名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="营业时间" style="margin-left: 20px">
              <el-time-picker
                value-format="HH:mm"
                v-model="addForm.business_begin_time"
                placeholder="营业开始时间"
                style="width: 150px; float: left; margin-right: 30px"
              ></el-time-picker>
              <el-time-picker
                value-format="HH:mm"
                v-model="addForm.business_end_time"
                placeholder="营业结束时间"
                style="width: 150px; float: left"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="位置" prop="parking_lot_address">
              <el-input
                type="text"
                v-model="addForm.parking_lot_address"
                placeholder="请选择位置"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="2"
            class="iconstop"
            style="cursor: pointer; font-size: 20px"
          >
            <i class="el-icon-location" @click="openShowMap"></i>
          </el-col>
          <el-col :span="12" style="margin-left: 20px">
            <el-form-item label="联系方式">
              <el-input
                type="xt"
                v-model="addForm.contact_phone"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="margintop">
          <el-col :span="11">
            <el-form-item label="出口">
              <el-input
                type="text"
                v-model="addForm.exit"
                placeholder="请输入出口"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="marginleft">
            <!-- <el-form-item label="车场照片">
              <el-upload
                ref="upload"
                action="#"
                list-type="picture-card"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-change="handleChange"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="入口">
              <el-input
                type="text"
                v-model="addForm.entrance"
                placeholder="请输入入口"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="marginleft">
            <el-form-item label="是否预约">
              <el-radio-group v-model="addForm.is_appoint">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预约费">
            <el-input-number
              v-model="addForm.appoint_price"
              controls-position="right"
              placeholder="请输入预约费"
            ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="超出预约时间每小时多收费" label-width="180px">
            <el-input-number
              v-model="addForm.moreMoney"
              controls-position="right"
              placeholder="请输入超出预约时间每小时多收费"
            ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="每小时收费">
            <el-input-number
              v-model="addForm.hourMoney"
              controls-position="right"
              placeholder="请输入每小时收费"
            ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取消预约费用">
            <el-input-number
              v-model="addForm.cancleMoney"
              controls-position="right"
              placeholder="请输入取消预约费用"
            ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form
        v-show="orderpage"
        :model="addForm"
        ref="addForm"
        label-width="120px"
        style="margin-left: 100px"
      >
        <div class="xiexian">
          <i class="el-icon-arrow-left xiexianson" @click="orderback"></i>
        </div>

        <!-- <el-row>
          <el-col :span="12">
            <el-col :span="11" class="marginright">
              <div class="fontweight">车主可提前多久预约</div>
            </el-col>
            <el-col :span="3">
              <div class="zdy" @click="zdy">自定义</div>
            </el-col>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="14">
            <el-form-item>
              <el-radio-group v-model="addForm.appoint_time">
                <el-radio :label="5">5分钟</el-radio>
                <el-radio :label="10">10分钟</el-radio>
                <el-radio :label="20">20分钟</el-radio>
                <el-radio :label="30">30分钟</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-show="zdyshow1">
            <el-form-item>
              <el-input
                type="text"
                v-model="addForm.appoint_time"
                placeholder="提前预约时间"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" v-show="zdyshow1" class="icons">
            <div>分钟</div>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="12">
            <el-col :span="11" class="marginright">
              <div class="fontweight">车主可提前免费取消预约时间</div>
            </el-col>
            <el-col :span="3">
              <div class="zdy" @click="zdy2">自定义</div>
            </el-col>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="14">
            <el-form-item>
              <el-radio-group v-model="addForm.cancel_appoint_time">
                <el-radio :label="5">5分钟</el-radio>
                <el-radio :label="10">10分钟</el-radio>
                <el-radio :label="20">20分钟</el-radio>
                <el-radio :label="30">30分钟</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-show="zdyshow2">
            <el-form-item>
              <el-input
                type="text"
                v-model="addForm.cancel_appoint_time"
                placeholder="提前预约时间"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" v-show="zdyshow2" class="icons">
            <div>分钟</div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 35px">
          <el-col :span="6">
            <div class="fontweight">超出预约出场时间的部分按单价</div>
          </el-col>
          <el-col :span="6" style="margin-top: -8px; margin-bottom: 20px">
            <el-input
              type="text"
              v-model="addForm.multiple"
              placeholder="请输入倍数"
            ></el-input>
          </el-col>
          <el-col :span="6" class="icons">
            <div>倍收取停车费</div>
          </el-col>
        </el-row> -->
      </el-form>
      <el-form
        v-show="secondpage"
        :model="addForm"
        ref="addForm"
        label-width="120px"
        style="margin: 0 0 30px 100px"
      >
        <div class="xiexian">
          <i class="el-icon-arrow-left xiexianson" @click="secondback"></i>
        </div>
        <el-row>
          <el-form-item label="收费模式">
            <el-radio-group v-model="addForm.fee_model" @change="feemodel">
              <el-radio :label="0">全时段免费</el-radio>
              <el-radio :label="1">全时段收费</el-radio>
              <el-radio :label="2">部分时段收费</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <div v-if="secondsonpage">
          <el-row>
            <el-col :span="8">
              <el-form-item label="区分车型">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  @change="switchCar"
                  v-model="addForm.is_car_type"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区分时段">
                <el-switch
                  :active-value="1"
                  :inactive-value="0"
                  @change="switchTime"
                  v-model="addForm.time_interval"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="!iScartype">
            <el-row v-if="!iSTime">
              <el-col :span="6" style="margin: -8px 0 20px 50px">
                <el-input
                  type="text"
                  v-model="addForm.all_charge_price"
                  placeholder="请输入费用"
                ></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">
                  日间(08:00-20:00)<i class="el-icon-edit"></i>
                </div>
              </el-col>
              <el-col :span="4" style="margin-top: -8px; margin-bottom: 20px">
                <el-input
                  type="text"
                  v-model="addForm.day_price"
                  placeholder="请输入费用"
                ></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">
                  夜间(20:00-08:00)<i class="el-icon-edit"></i>
                </div>
              </el-col>
              <el-col :span="4" style="margin-top: -8px; margin-bottom: 20px">
                <el-input
                  type="text"
                  v-model="addForm.night_price"
                  placeholder="请输入费用"
                ></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div>
          <div v-if="iScartype">
            <el-row>
              <el-col :span="3">
                <div class="fontweight marginbottom">大车</div>
              </el-col>
            </el-row>
            <el-row v-if="!iSTime">
              <el-col :span="6" style="margin: -8px 0 20px 50px">
                <el-input
                  type="text"
                  v-model="addForm.big_car_price"
                  placeholder="请输入费用"
                ></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">
                  日间(08:00-20:00)<i class="el-icon-edit"></i>
                </div>
              </el-col>
              <el-col :span="4" style="margin-top: -8px; margin-bottom: 20px">
                <el-input
                  type="text"
                  v-model="addForm.big_day_price"
                  placeholder="请输入费用"
                ></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">
                  夜间(20:00-08:00)<i class="el-icon-edit"></i>
                </div>
              </el-col>
              <el-col :span="4" style="margin-top: -8px; margin-bottom: 20px">
                <el-input
                  type="text"
                  v-model="addForm.big_night_price"
                  placeholder="请输入费用"
                ></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div>
          <div v-if="iScartype">
            <el-row class="margintop">
              <el-col :span="3">
                <div class="fontweight marginbottom">小车</div>
              </el-col>
            </el-row>
            <el-row v-if="!iSTime">
              <el-col :span="6" style="margin: -8px 0 20px 50px">
                <el-input-number
                  type="text"
                  v-model="addForm.small_car_price"
                  placeholder="请输入费用"
                ></el-input-number>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">
                  日间(08:00-20:00)<i class="el-icon-edit"></i>
                </div>
              </el-col>
              <el-col :span="4" style="margin-top: -8px; margin-bottom: 20px">
                <el-input-number
                  type="text"
                  v-model="addForm.small_day_price"
                  placeholder="请输入费用"
                ></el-input-number>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iSTime">
              <el-col :span="5">
                <div class="fontweight">
                  夜间(20:00-08:00)<i class="el-icon-edit"></i>
                </div>
              </el-col>
              <el-col :span="4" style="margin-top: -8px; margin-bottom: 20px">
                <el-input
                  type="text"
                  v-model="addForm.small_night_price"
                  placeholder="请输入费用"
                ></el-input>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="3">
              <div>免费停车时长</div>
            </el-col>
            <el-col :span="6" style="margin-top: -8px; margin-bottom: 20px">
              <el-input
                type="text"
                v-model="addForm.free_parking_time"
                placeholder="请输入免费停车时长"
              ></el-input>
            </el-col>
            <el-col :span="1" class="icons">
              <div>分钟</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <div>封顶价格</div>
            </el-col>
            <el-col :span="6" style="margin-top: -8px; margin-bottom: 20px">
              <el-input-number
                type="text"
                v-model="addForm.toplimit_price"
                placeholder="请输入封顶价格"
                controls-position="right"
              ></el-input-number>
            </el-col>
            <el-col :span="1" class="icons">
              <div>元/天</div>
            </el-col>
          </el-row>
        </div>
        <div v-if="thirdsonpage">
          <el-row>
            <el-col :span="8">
              <el-form-item label="区分车型">
                <el-switch
                  :active-value="0"
                  :inactive-value="0"
                  @change="switchCar"
                  v-model="addForm.is_car_type"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="时间">
                <el-time-picker
                  value-format="HH:mm"
                  v-model="addForm.begin_time"
                  placeholder="营业开始时间"
                  style="width: 150px; float: left; margin-right: 30px"
                ></el-time-picker>
                <el-time-picker
                  value-format="HH:mm"
                  v-model="addForm.end_time"
                  placeholder="营业结束时间"
                  style="width: 150px; float: left"
                ></el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div style="margin: 15px 0 0 10px">
                <i class="el-icon-time" style="font-size: 20px"></i>
              </div>
            </el-col>
          </el-row>
          <div v-if="!iScartype">
            <el-row>
              <el-col :span="10">
                <el-form-item label="价格">
                  <el-input-number
                    type="text"
                    v-model="addForm.period_charge_price"
                    placeholder="请输入价格"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div>
          <div v-if="iScartype">
            <el-row>
              <el-col :span="2">
                <div class="fontweight marginbottom" style="float: right">
                  大车
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="价格">
                  <el-input-number
                    type="text"
                    v-model="addForm.big_part_price"
                    placeholder="请输入价格"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
            <el-row v-if="iScartype">
              <el-col :span="2">
                <div class="fontweight marginbottom" style="float: right">
                  小车
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="价格">
                  <el-input-number
                    type="text"
                    v-model="addForm.small_part_price"
                    placeholder="请输入价格"
                    controls-position="right"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="1" class="icons">
                <div>元/时</div>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="3" style="margin-right: 13px">
              <div class="float-right">免费停车时长</div>
            </el-col>
            <el-col :span="6" style="margin-top: -8px; margin-bottom: 20px">
              <el-input-number
                type="text"
                v-model="addForm.free_parking_time"
                placeholder="请输入免费停车时长"
              ></el-input-number>
            </el-col>
            <el-col :span="1" class="icons">
              <div>分钟</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3" style="margin-right: 13px">
              <div class="float-right">封顶价格</div>
            </el-col>
            <el-col :span="6" style="margin-top: -8px; margin-bottom: 20px">
              <el-input-number
                type="text"
                v-model="addForm.toplimit_price"
                placeholder="请输入封顶价格"
                controls-position="right"
              ></el-input-number>
            </el-col>
            <el-col :span="1" class="icons">
              <div>元/天</div>
            </el-col>
          </el-row>

        </div>

      </el-form>
      <div style="text-align: center">
        <el-button
          type="primary"
          @click="EditParking"
          ><span style="margin: 0 50px">{{titles === '添加' ? '添加' : '编辑'}}</span></el-button
        >
        <!-- <el-button
          type="primary"
          @click="orderress"
          v-if="titles === '添加' && addForm.is_appoint === 1"
          ><span style="margin: 0 50px">下一步</span></el-button
        >
        <el-button
          type="primary"
          @click="secondress"
          v-if="titles === '添加' && addForm.is_appoint === 0"
          ><span style="margin: 0 50px">下一步</span></el-button
        >
        <el-button
          type="primary"
          @click="orderress"
          v-if="titles === '编辑' && addForm.is_appoint === 1"
          ><span style="margin: 0 50px">下一步</span></el-button
        >
        <el-button
          type="primary"
          @click="secondress"
          v-if="titles === '编辑' && addForm.is_appoint === 0"
          ><span style="margin: 0 50px">下一步</span></el-button
        >
        <el-button
          type="primary"
          @click="secondorderress"
          v-if="titles === '预约设置'"
          ><span style="margin: 0 50px">下一步</span></el-button
        > -->
        <el-button
          type="primary"
          @click="ReadyParking"
          v-if="titles === '请设置缴费标准' && is_Ready === true"
          ><span style="margin: 0 50px">确定</span></el-button
        >
      </div>
    </el-dialog>
    <!-- 详情 -->
    <transition name="fade">
      <div v-show="!formAge">
        <div
          class="hm-select-area bg-white font-14"
          style="letter-spacing: 1px"
        >
          <el-row class="bord">
            <el-col :span="1">
              <i class="el-icon-back" @click="back"></i>
            </el-col>
            <el-col :span="6">
              <div class="yjxq">停车场详情</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <!-- <img v-if="detailList.img" :src='detailList.img[0].img_url' @error="nofind" width="180px" height="160px"/> -->
              <!-- <img v-if="!detailList.img" src='../../assets/images/login_bg.png' width="180px" height="160px"/> -->
            </el-col>
            <el-col :span="19">
              <el-row>
                <el-col :span="10">
                  <div>
                    <span
                      class="marginright"
                      style="font-size: 20px"
                      v-if="this.detailList.parking_lot_name"
                      >{{
                        this.detailList.parking_lot_name
                          ? this.detailList.parking_lot_name
                          : ""
                      }}</span
                    ><span
                      >{{
                        !!this.detailList.occupyCount
                          ? this.detailList.occupyCount
                          : ""
                      }}/{{
                        !!this.detailList.totalCount
                          ? this.detailList.totalCount
                          : ""
                      }}</span
                    >
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="addredel" @click="delParking">删除</div>
                </el-col>
                <el-col :span="2">
                  <div class="addre" @click="editParking">编辑</div>
                </el-col>
              </el-row>
              <el-row class="margintop">
                <el-col :span="10">
                  <div>
                    营业时间:每天
                    {{
                      !!this.detailList.business_begin_time
                        ? this.detailList.business_begin_time
                        : ""
                    }}-{{
                      !!this.detailList.business_end_time
                        ? this.detailList.business_end_time
                        : ""
                    }}
                  </div>
                </el-col>
                <el-col :span="10">
                  <div>
                    联系方式:{{
                      !!this.detailList.contact_phone
                        ? this.detailList.contact_phone
                        : ""
                    }}
                  </div>
                </el-col>
              </el-row>
              <el-row class="margintop">
                <el-col :span="10">
                  <div>
                    位置:{{
                      !!this.detailList.parking_lot_address
                        ? this.detailList.parking_lot_address
                        : ""
                    }}
                  </div>
                </el-col>
                <el-col :span="10">
                  <div>
                    出口:{{ this.detailList.exit || "" }} 入口:
                    {{ this.detailList.entrance || "" }}
                  </div>
                </el-col>
              </el-row>
              <el-row class="margintop">
                <el-col :span="10">
                  <div>
                    取消预约费用:{{
                      detailList.cancleMoney
                    }}
                  </div>
                </el-col>
                <!-- <el-col :span="10">
                  <div style="color: #ffc125">
                    分利比例:{{
                      !!this.detailList.proportion
                        ? this.detailList.proportion
                        : ""
                    }}<span class="marginleft"
                      ><i class="el-icon-edit"></i
                    ></span>
                  </div>
                </el-col> -->
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div class="hm-select-area bg-white font-14">
          <el-button type="warning" @click="addarea" style="margin-bottom:30px">添加区域</el-button>
          <el-row>
            <el-col :span="10" class="areathing">
              <div
                v-for="(item, index) in areaArray"
                :key="index"
                @click="arearess(item, index)"
                plain
                class="marginright areaclass"
                :class="index === currentIndexNav ? 'active' : ''"
              >
                {{ item.name }}
              </div>
              <!-- <i
                class="el-icon-circle-plus-outline hand"
                
                style="font-size: 18px"
              ></i> -->
              
            </el-col>
            <el-col :span="areaArray.length === 0 ? 10 : 5">
              <div class="deldanger hand" @click="delArea">删除该区域</div>
            </el-col>
            <el-col :span="areaArray.length === 0 ? 10 : 5">
              <div class="deldanger hand" @click="editAreas">修改该区域</div>
            </el-col>
            <!-- <el-col :span="4">
              <div class="delblue hand"></div>
              <div style="color:#00BFFF;"></div>
            </el-col> -->
            <el-col :span="4">
              <el-button
                type="primary"
                style="float: right"
                @click="addParkingress"
                plain
                >添加车位</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-table
              class="home-table"
              v-loading="tableLoading"
              :data="tableDataParking"
              :header-cell-style="{
                background: '#F7F7F7',
                color: '#101010',
                fontWeight: 'normal',
              }"
            >
              <el-table-column type="index" width="60" label="序号" />
              <el-table-column
                prop="parking_place_number"
                label="车位号"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                label="停车方式"
                header-align="center"
                v-slot="{ row }"
                align="center"
              >
                {{ row.is_appoint === 1 ? "可预约" : "不可预约" }}
                <!-- <template slot-scope="scope">
                  {{scope.row.is_appoint==='1'?'可预约': '不可预约'}}
              </template> -->
              </el-table-column>
              <el-table-column
                label="充电桩"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.is_charging === 1 ? "有" : "无" }}
                </template>
              </el-table-column>
              <el-table-column
                label="车位状态"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.status === 0 ? "空闲" : "占用" }}
                </template>
              </el-table-column>
              <el-table-column
                label="车位类别"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.car_type === 0 ? "小车" : "大车" }}
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click="editInfo(scope.row)"
                    >编辑</el-button
                  >
                  <el-button type="text" @click="delPlaceInfo(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="hm-page"
              background
              layout="prev, pager, next"
              :total="totalParking"
              @current-change="sizeChange"
            >
            </el-pagination>
          </el-row>
          <!-- 添加车位 -->
          <el-dialog
            :title="titlesParking"
            :visible.sync="dialogVisibleAddParking"
            width="40%"
            :before-close="handleCloses"
          >
            <el-form
              v-show="is_bulk_import"
              :model="addParkingList"
              ref="addParkingList"
              label-width="120px"
            >
              <el-row class="margintop">
                <el-col :span="16">
                  <el-form-item label="车位编号">
                    <el-input
                      placeholder="请输入车位号"
                      v-model="addParkingList.parking_place_number"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="margintop">
                <el-col :span="8">
                  <el-checkbox
                    style="float: right"
                    :true-label="1"
                    :false-label="0"
                    v-model="addParkingList.is_appoint"
                    >可预约</el-checkbox
                  >
                </el-col>
                <el-col :span="8">
                  <el-checkbox
                    style="float: right"
                    :true-label="1"
                    :false-label="0"
                    v-model="addParkingList.is_charging"
                    >可充电</el-checkbox
                  >
                </el-col>
              </el-row>
              <el-row class="margintop">
                <el-col :span="16">
                  <el-form-item label="车位类别">
                    <el-select v-model="addParkingList.car_type">
                      <el-option label="小车" :value="0"></el-option>
                      <el-option label="大车" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="margintop marginbottom" style="text-align: center">
                <!-- <el-button type="primary" v-if="titlesParking!='编辑车位'" plain @click="batchress" ><span style="margin:0 40px">批&nbsp;量&nbsp;导&nbsp;入</span></el-button> -->
                <el-button
                  type="primary"
                  v-if="titlesParking != '编辑车位'"
                  @click="deterress"
                  ><span style="margin: 0 40px"
                    >确&nbsp;&nbsp;定</span
                  ></el-button
                >
                <el-button
                  type="primary"
                  v-if="titlesParking === '编辑车位'"
                  @click="editress"
                  ><span style="margin: 0 40px"
                    >确&nbsp;&nbsp;定</span
                  ></el-button
                >
              </div>
            </el-form>
            <el-row v-show="!is_bulk_import">
              <div class="xiexians">
                <i
                  class="el-icon-arrow-left xiexianson"
                  @click="importback"
                ></i>
              </div>
              <el-row style="margin: 80px 0 50px 0">
                <el-col :span="15">
                  <el-upload
                    class="float-right"
                    style="display: inline-block"
                    :action="url"
                    :before-upload="handleBefore"
                    method="post"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :headers="{ token }"
                    :file-list="fileLists"
                  >
                    <!-- :data="{admin_id: admin_id}" -->
                    <el-button type="primary" size="medium"
                      ><span style="margin: 0 50px">导入</span></el-button
                    >
                  </el-upload>
                </el-col>
              </el-row>
              <el-row style="margin: 20px 0 50px 0">
                <el-col :span="15">
                  <el-button
                    type="primary"
                    plain
                    size="medium"
                    @click="downloadTemplate"
                    class="float-right"
                    ><span style="margin: 0 35px">下载模板</span></el-button
                  >
                </el-col>
              </el-row>
            </el-row>
          </el-dialog>
        </div>
      </div>
    </transition>
    <!-- 添加区域 -->
    <el-dialog
      :title="titlearea"
      :visible.sync="dialogVisibleArea"
      width="40%"
      :before-close="handleCloseArea"
    >
      <el-form :model="addAreaList" ref="addAreaList" label-width="120px">
        <el-row class="margintop">
          <el-col :span="16">
            <el-form-item label="区域名称">
              <el-input
                placeholder="请输入区域名称"
                v-model="addAreaList.name"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="margintop marginbottom" style="text-align: center">
        <el-button
          type="primary"
          v-if="titlearea === '添加区域'"
          @click="insertArea"
          ><span style="margin: 0 40px"
            ><span style="margin: 0 20px">确定</span></span
          ></el-button
        >
        <el-button
          type="primary"
          v-if="titlearea === '编辑区域'"
          @click="editArea"
          ><span style="margin: 0 40px"
            ><span style="margin: 0 20px">确定</span></span
          ></el-button
        >
      </div>
    </el-dialog>
        <el-dialog
            v-if="showMap"
            :visible="showMap"
            width="60vw"
            top="10vh"
            style="min-width: 450px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :append-to-body="true"
            :before-close="cancelShowMap"
            class="map-contet"
        >
            <div slot="title" class="map-title">
                <div class="title-text">
                    地图选点
                </div>
                <div class="point-info">
                    <span v-if="curLat && curLng">
                        当前选点位置信息 -> 经度：{{curLng}}，纬度：{{curLat}}
                    </span>
                    <span v-else>
                        在地图上点击进行选点
                    </span>
                </div>
            </div>
            <div  class="map">
                <BaiduMap
                    scroll-wheel-zoom
                    :double-click-zoom="false"
                    class="bd-map"
                    ak="epasxo4yK1n2BEBkIofCEeMPxSO5FuAC"
                    :zoom="13"
                    :center="center"
                    @ready="handleMapReady"
                    @click="handleMapClick"
                >
                    <BmControl
                        :offset="{ width: '15px', height: '15px'}"
                    >
                        <div class="map-input">
                            <el-input
                                id="suggestId"
                                v-model="mapKeyword"
                                size="small"
                                clearable
                                placeholder="搜索地点..."
                            />
                        </div>
                    </BmControl>
                </BaiduMap>
            </div>
            <div slot="footer">
                <el-button @click="cancelShowMap" size="mini">取 消</el-button>
                <el-button type="primary" @click="selectMapMarks" size="mini">确 定</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import { exportmonth } from "@/api/request";
import { gcj02towgs84  } from '@/utils/gcj02towgs84'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmControl from 'vue-baidu-map/components/controls/Control'
const fujianLng = 119.3
const fujianLat = 26.06
// import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
// let amapManager = new AMapManager()
export default {
  name: "index",
  components:{ 
      BaiduMap,
      BmControl,
  },
  data() {
    const self = this;
    return {
      resizeEnable: true,
      defaultCity: '福州',
      areaArray: [],
      is_Ready: true,
      is_bulk_import: true,
      areaoneList: {},
      addParkingList: {
        parking_place_number: "",
        car_type: 0,
        is_appoint: 0,
        is_charging: 0,
      },
      addressInfo: "",
      tableData: [],
      tableDataParking: [],
      totalParking: 10,
      searchParking: {
        page: 1,
        page_num: 10,
        partition_id: "",
        admin_id: "",
        parking_lot_id: "",
      },
      activeName: "first",
      formAge: true,
      total: 1,
      parkingLotList: [],
      fileList: [],
      firstpage: true,
      orderpage: false,
      secondpage: false,
      secondsonpage: false,
      thirdsonpage: false,
      emergencyTypeLists: {},
      dialogVisible: false,
      dialogVisibleAddParking: false,
      dialogVisibleArea: false,
      zdyshow1: false,
      zdyshow2: false,
      addForm: {},
      searchObj: {
        parking_lot_name: "",
      },
      detailList: {},
      addAreaList: {},
      currentIndexNav: 0,
      iScartype: false,
      iSTime: false,
      dialogImageUrl: "",
      titles: "添加",
      titlesParking: "添加车位",
      titlearea: "添加区域",
      admin_id: "",
      url: "",
      token: "",
      fileLists: [],
      parkLoading: false,
      tableLoading: false,
      curLng: 0,
      curLat: 0,
      MapIns: null,
      BMapIns: null,
      showMap: false,
      mapLoading: false,
      mapKeyword: '',
      center: {
          lng: 0,
          lat: 0
      },
    };
  },
  mounted() {
    // this.admin_id = this.$store.state.adminId
    // this.url = process.env.NODE_ENV === 'production' ? "/admin/bill/export" : '/admin/bill/export?admin_id=' + this.admin_id+ '&type=' + 'month' + '&time=' + new Date(new Date().getFullYear(),new Date().getMonth(),1).getTime() / 1000
    // console.log(this.url)
    // console.log(process.env.NODE_ENV)
    // this.token = 'Bearer '+ this.$store.state.token
    this.getParkingLotList();
  },
  methods: {
        openShowMap () {
            this.showMap = true
            this.mapLoading = true
        },
        // 关闭地图选点
        cancelShowMap() {
            this.mapLoading = false
            this.showMap = false
            this.mapKeyword = ''
        },
        // 地图选点结束
        selectMapMarks () {
            // 如果没有进行选点直接关闭
            this.cancelShowMap()
        },
        // 地图加载完毕
        handleMapReady ({ BMap, map}) {
            setTimeout(() => this.mapLoading = false, 500)
            this.BMapIns = BMap
            this.MapIns = map
            this.center.lng = fujianLng
            this.center.lat = fujianLat
            if (this.curLng && this.curLat) {
                map.clearOverlays()
                let point = {
                    lng: this.curLng,
                    lat: this.curLat
                }
                map.centerAndZoom(point, 13)
                map.addOverlay(new this.BMapIns.Marker(point))
            }
            this.createSearch()
        },
        createSearch () {
            let ac = new this.BMapIns.Autocomplete(
                {
                    input : 'suggestId',
                    location : '福建省'
                }
            )
            // ac.addEventListener("onhighlight", function(e) {
            //     console.log(e)
            // })
            let localSearch = new this.BMapIns.LocalSearch('福建省', {
                onSearchComplete: () => {
                    let firstRes = localSearch?.getResults()?.getPoi(0)?.point
                    if (!firstRes) return this.$message.info('暂无具体信息！')
                    const { lat, lng } = firstRes
                    this.curLat = lat
                    this.curLng = lng
                    this.MapIns.centerAndZoom(firstRes, 16)
                    this.MapIns.addOverlay(new this.BMapIns.Marker(firstRes))
                }
            })
            ac.addEventListener('confirm', e => {
                this.MapIns.clearOverlays()
                let _value = e.item.value
                let str = _value.province +  _value.city +  _value.district +  _value.street +  _value.business
                localSearch.search(str)
            })
        },
        // 地图点击事件
        handleMapClick(e) {
            console.log(e);
            this.MapIns.clearOverlays()
            this.curLng = e.point.lng
            let point = new BMap.Point(e.point.lng, e.point.lat);
            this.curLat = e.point.lat
            this.$set(this.addForm,'latitude',e.point.lat)
            this.$set(this.addForm,'longitude',e.point.lng)
            let gc = new BMap.Geocoder();
            gc.getLocation(point, rs=> {
                // let addComp = rs.addressComponents;
                this.$set(this.addForm,'parking_lot_address',rs.address)
                // _this.locData.address = rs.address;

            });
            let marker = new this.BMapIns.Marker({
                lng: e.point.lng,
                lat: e.point.lat,
                clicking: false
            })
            this.MapIns.addOverlay(marker)
            // this.markerPosition.lat = e.point.lat
            // this.markerPosition.lng = e.point.lng
        },
    //图片出错
    nofind() {
      var img = event.srcElement;
      img.src = require("./../../assets/images/login_bg.png");
      img.οnerrοr = null;
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      console.log(response);
      if (Number(response.code) === 1000) {
        this.$message({
          type: "success",
          message: "导入成功",
          duration: 2000,
          onClose: () => {},
        });
      }
    },
    // 上传之前的文件
    handleBefore(file) {
      console.log(file);
      const arr = file.name.split(".");
      const type = arr[arr.length - 1];
      console.log(type);
      // if (type !== 'csv') {
      //   this.$message.error('请上传csv文件！')
      //   return false
      // }
      //  if (type !== 'xlsx') {
      //   this.$message.error('请上传xlsx文件！')
      //   return false
      // }
    },
    reset() { 
      this.searchObj =  { 
        parking_lot_name :''
      }
      this.getParkingLotList()
    },
    downloadTemplate() {
      window.open(exportmonth);
    },
    //我的停车场
    async getParkingLotList() {
      try {
        this.parkLoading = true;
        const { data: res } = await this.$api.Parking.getParkingList({
            ...this.searchObj
        });
        if (res.code) return this.$message.error(res.msg);
        this.parkingLotList = this._.cloneDeep(res.result);
      } catch (e) {
        console.log(e);
      } finally {
        this.parkLoading = false;
      }
    },
    // 添加停车场
    ReadyParking() {
      //   if(this.addForm.fee_model=== 0) {
      //     if(this.addForm.is_car_type=== 1){
      //       if(this.addForm.time_interval===1){
      //         if(!this.addForm.big_day_price){
      //           this.$message.error('请输入大车日间价格')
      //           return false
      //         }
      //         if(!this.addForm.big_night_price){
      //           this.$message.error('请输入大车夜间价格')
      //           return false
      //         }
      //         if(!this.addForm.small_day_price){
      //           this.$message.error('请输入小车日间价格')
      //           return false
      //         }
      //         if(!this.addForm.small_night_price){
      //           this.$message.error('请输入小车夜间价格')
      //           return false
      //         }
      //       }else{
      //         if(!this.addForm.big_car_price){
      //           this.$message.error('请输入大车价格')
      //           return false
      //         }
      //         if(!this.addForm.small_car_price){
      //           this.$message.error('请输入小车价格')
      //           return false
      //         }
      //       }
      //     }else{
      //       if(this.addForm.time_interval===1){
      //         if(!this.addForm.day_price){
      //           this.$message.error('请输入日间价格')
      //           return false
      //         }
      //         if(!this.addForm.night_price){
      //           this.$message.error('请输入夜间价格')
      //           return false
      //         }
      //       }
      //       else{ if(!this.addForm.all_charge_price){
      //           this.$message.error('请输入收费费用')
      //           return false
      //         }
      //       }
      //     }
      //     if(!this.addForm.free_parking_time){
      //       this.$message.error('请输入免费停车时间')
      //       return false
      //     }
      //     if(!this.addForm.toplimit_price){
      //       this.$message.error('请输入每天封顶价格')
      //       return false
      //     }
      //   }else if(this.addForm.fee_model=== 2){
      //     if(!this.addForm.begin_time){
      //       this.$message.error('请选择收费开始时间')
      //       return false
      //     }
      //     if(!this.addForm.end_time){
      //       this.$message.error('请选择收费结束时间')
      //       return false
      //     }
      //     if(this.addForm.is_car_type===1){
      //       if(!this.addForm.big_part_price){
      //         this.$message.error('请输入大车价格')
      //         return false
      //       }
      //       if(!this.addForm.small_part_price){
      //         this.$message.error('请输入小车价格')
      //         return false
      //       }
      //     }else{
      //       if(!this.addForm.period_charge_price){
      //         this.$message.error('请输入停车价格')
      //         return false
      //       }
      //     }
      //     if(!this.addForm.free_parking_time){
      //       this.$message.error('请输入免费停车时间')
      //       return false
      //     }
      //     if(!this.addForm.toplimit_price){
      //       this.$message.error('请输入每天封顶价格')
      //       return false
      //     }
      //   }else{}
      if (this.fileList.length === 0) {
        this.getAddParkingLot();
      } else if (this.fileList.length === 1) {
        let fd = new FormData();
        fd.append("upload_file", this.fileList[0].raw);
        // this.$api.uploadImage(fd).then(res=>{
        //   this.addForm.img_url = res.url
        this.getAddParkingLot();
        // })
      } else if (this.fileList.length > 1) {
        let that = this;
        // let filenumber = 0
        this.fileList.forEach(function (file) {
          let fd = new FormData();
          // 因为要上传多个文件，所以需要遍历一下才行
          fd.append("upload_file", file.raw);
          //   that.$api.uploadImage(fd).then(res=>{
          //     filenumber++
          //     if(filenumber===that.fileList.length){
          //       that.addForm.img_url+=res.url
          that.getAddParkingLot();
          //     }else{
          //       that.addForm.img_url+=res.url+","
          //     }
          //   })
        });
      }
    },
    async getById() {
      try {
        const { data: res } = await this.$api.Parking.getParkingById({
          id: this.detailList.parking_lot_id,
        });
        if (res.code) return this.$message.error(res.msg);
        // this.$message.success(res.msg)
        this.detailList = res.result[0];
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    async EditParking() {
      try {
        let method = this.titles === '添加' ?  'add': 'editParking'
        console.log(this.addForm);
        const { data: res } = await this.$api.Parking[method]({
          ...this.addForm,
        })
        if (res.code) return this.$message.error(res.msg);
        this.$message.success("编辑成功");
        this.dialogVisible = false;
        if(this.titles === '添加') { 
          this.getParkingLotList();
        }else{ 
          this.getById();
        }
      } catch (e) {
        console.log(e);
      }
    },
    //添加停车场接口
    async getAddParkingLot() {
      // console.log(123);
      try {
        console.log(this.addForm);
        const { data: res } = await this.$api.Parking.add({
          ...this.addForm,
        });
        if (res.code) return this.$message.error(res.msg);
        this.$message.success("添加成功");
        this.dialogVisible = false;
        this.getParkingLotList();
      } catch (e) {
        console.log(e);
      }
      //   this.addForm.admin_id = this.admin_id
      // this.$api.addParkingLot(this.addForm).then(res=>{
      //   this.$message({
      //     type: 'success',
      //     message: '添加成功'
      //   })
      //   this.secondpage = false
      //   this.handleClose()
      //   this.getParkingLotList()
      // })
    },
    // 删除停车场
    delParking() {
      this.$confirm("此操作将删除该停车场,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const { data: res } = await this.$api.Parking.delPark({
              id: this.detailList.parking_lot_id,
            });
            if (res.code) return this.$message.error(res.msg);
            this.$message.success("删除成功!");
            this.getParkingLotList();
            this.formAge = true;
          } catch (e) {
            console.log(e);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //地图
    locatefal() {
      this.locate = false;
    },
    //我的停车场详情页
    detailInfo(item) {
      this.detailList = item;
      this.getPartitionList();
      this.formAge = !this.formAge;
    },
    // 区域列表
    async getPartitionList() {
      try {
        console.log(this.detailList);
        const { data: res } = await this.$api.Parking.getAreaList({
          parking_lot_id: this.detailList.parking_lot_id,
        });
        if (res.code) return this.$message.error(res.msg);
        this.areaArray = res.result;
        if (this.areaArray.length !== 0) {
          this.getSpaceList();
        }
      } catch (e) {
        console.log(e);
      }
    },
    //停车场详情
    getParkingLotDetail() {
      this.searchParking.admin_id = this.admin_id;
      this.searchParking.parking_lot_id = this.detailList.parking_lot_id;
      if (!this.areaArray.length) {
        this.getSpaceList();
      }
    },
    //添加ABC区区域
    // 获取停车位
    async getSpaceList() {
      try {
        this.tableLoading = true;
        const { data: res } = await this.$api.Parking.getSpaceList({
          area_id: this.areaArray[this.currentIndexNav].area_id,
        });
        if (res.code) return this.$message.error(res.msg);
        this.tableDataParking = res.result;
      } catch (e) {
        console.log(e);
      } finally {
        this.tableLoading = false;
      }
    },
    addarea() {
      // if(this.areaArray.length === 0) return this.$message.error('请先添加区域！')
      this.titlearea = "添加区域";
      this.dialogVisibleArea = true;
    },
    // 修改ABC区区域
    editAreas() {
      if(this.areaArray.length === 0) return this.$message.error('请先添加区域！')
      this.titlearea = "编辑区域";
      this.addAreaList = this._.cloneDeep(this.areaArray[this.currentIndexNav]);
      console.log(this.addAreaList);
      //   this.addAreaList.partition_name = this.areaoneList.partition_name
      //   this.addAreaList.partition_id = this.areaoneList.partition_id
      this.dialogVisibleArea = true;
    },
    //点击ABC区域
    arearess(item, index) {
      this.currentIndexNav = index;
      this.areaoneList = item;
      this.searchParking.partition_id = item.partition_id;
      this.getParkingLotDetail();
      this.getSpaceList()
    },
    // 添加区域
    async insertArea() {
      //   this.addAreaList.parking_lot_id = this.detailList.parking_lot_id
      try {
        const { data: res } = await this.$api.Parking.addArea({
          parking_lot_id: this.detailList.parking_lot_id,
          name: this.addAreaList.name,
        });
        if (res.code) return this.$message.error("操作失败!");
        this.$message.success(res.msg);
        this.dialogVisibleArea = false;
        this.getPartitionList();
      } catch (e) {
        console.log(e);
      }
      // this.$api.addPartition(this.addAreaList).then(res=>{
      //   this.$message({
      //     type:'success',
      //     message:'添加成功'
      //   })
      //   this.getPartitionList()
      //   this.handleCloseArea()
      // })
    },
    // 编辑区域
    async editArea() {
      try {
        const { data: res } = await this.$api.Parking.editArea({
          ...this.areaArray[this.currentIndexNav],
          name: this.addAreaList.name,
        });
        if (res.code) return this.$message.error(res.msg);
        this.$message.success("编辑成功");
        this.dialogVisibleArea = false;
        this.getPartitionList();
      } catch (e) {
        console.log(e);
      }
      //   this.addAreaList.parking_lot_id = this.detailList.parking_lot_id
      // this.$api.editPartition(this.addAreaList).then(res=>{
      //   this.$message({
      //     type:'success',
      //     message:'编辑成功'
      //   })
      //   this.getPartitionList()
      //   this.handleCloseArea()
      // })
    },
    // 删除区域
    delArea() {
      if(this.areaArray.length === 0) return this.$message.error('请先添加区域！')
      this.$confirm(
        "此操作将删除" +
          this.areaArray[this.currentIndexNav].name +
          "区域,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          try {
            const { data: res } = await this.$api.Parking.delArea({
              area_id: this.areaArray[this.currentIndexNav].area_id,
            });
            if (res.code) return this.$message.error(res.msg);
            this.getPartitionList();
          } catch (e) {
            console.log(e);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    sizeChange(val) {
      this.searchParking.page = val;
      this.searchParking.parking_lot_id = this.areaoneList.parking_lot_id;
      this.searchParking.partition_id = this.areaoneList.partition_id;
      this.getParkingLotDetail();
    },
    //批量导入返回
    importback() {
      this.titlesParking = "添加车位-" + this.areaoneList.partition_name;
      this.is_bulk_import = true;
    },
    // 批量导入
    batchress() {
      this.titlesParking = "批量导入";
      this.is_bulk_import = false;
    },
    // 添加车位确定
    async deterress() {
      try {
        const { data: res } = await this.$api.Parking.addSpace({
          area_id: this.areaArray[this.currentIndexNav].area_id,
          ...this.addParkingList,
          status: 0,
        });
        if (res.code) return this.$message.error("操作失败!");
        this.$message.success(res.msg);
        this.dialogVisibleAddParking = false;
        this.getSpaceList();
        this.addParkingList = {}
      } catch (e) {
        console.log(e);
      }
    },
    //修改车位确定
    async editress() {
      try {
        const { data: res } = await this.$api.Parking.editSpace({
          ...this.addParkingList,
        });
        if (res.code) return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.dialogVisibleAddParking = false;
        this.getSpaceList();
      } catch (e) {
        console.log(e);
      }
    },
    //点击添加车位
    addParkingress() {
      if(this.areaArray.length === 0) return this.$message.error('请先添加区域!')
      this.titlesParking =
        "添加车位-" + this.areaArray[this.currentIndexNav].name;
      this.dialogVisibleAddParking = true;
    },
    //点击编辑车位
    editInfo(val) {
      this.titlesParking = "编辑车位";
      this.addParkingList = this._.cloneDeep(val);
      this.is_bulk_import = true;
      this.dialogVisibleAddParking = true;
    },
    //点击删除车位
    delPlaceInfo(item) {
      this.$confirm(
        "此操作将删除" + item.parking_place_number + "车位,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          try {
            const { data: res } = await this.$api.Parking.delSpace({
              ...item,
            });
            if (res.code) return this.$message.error(res.msg);
            this.$message.success(res.msg);
            this.getSpaceList();
          } catch (e) {
            console.log(e);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 预约子页面
    orderress() {
      // if (!this.addForm.proportion) {
      //   this.$message.error("请输入收取分红比例");
      //   return false;
      // }
      if (!this.addForm.parking_lot_name) {
        this.$message.error("请输入停车场名称");
        return false;
      }
      if (!this.addForm.parking_lot_address) {
        this.$message.error("请输入位置");
        return false;
      }
      if (!this.addForm.latitude) {
        this.$message.error("请点击位置后面的图标选择地址");
        return false;
      }
      if (!this.addForm.longitude) {
        this.$message.error("请点击位置后面的图标选择地址");
        return false;
      }
      if (!this.addForm.exit) {
        this.$message.error("请输出口");
        return false;
      }
      if (!this.addForm.entrance) {
        this.$message.error("请输入口");
        return false;
      }
      if (!this.addForm.business_begin_time) {
        this.$message.error("请选择营业开始时间");
        return false;
      }
      if (!this.addForm.business_end_time) {
        this.$message.error("请选择营业结束时间");
        return false;
      }
      if (!this.addForm.contact_phone) {
        this.$message.error("请输入联系方式");
        return false;
      }
      this.titles = "预约设置";
      this.firstpage = false;
      this.orderpage = true;
    },
    // 添加照片时改变
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    // 删除照片
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 缴费标准页面
    secondress() {
      // if (!this.addForm.proportion) {
      //   this.$message.error("请输入收取分红比例");
      //   return false;
      // }
      if (!this.addForm.parking_lot_name) {
        this.$message.error("请输入停车场名称");
        return false;
      }
      if (!this.addForm.parking_lot_address) {
        this.$message.error("请输入位置");
        return false;
      }
      if (!this.addForm.latitude) {
        this.$message.error("请点击位置后面的图标选择地址");
        return false;
      }
      if (!this.addForm.longitude) {
        this.$message.error("请点击位置后面的图标选择地址");
        return false;
      }
      if (!this.addForm.exit) {
        this.$message.error("请输出口");
        return false;
      }
      if (!this.addForm.entrance) {
        this.$message.error("请输入口");
        return false;
      }
      if (!this.addForm.business_begin_time) {
        this.$message.error("请选择营业开始时间");
        return false;
      }
      if (!this.addForm.business_end_time) {
        this.$message.error("请选择营业结束时间");
        return false;
      }
      if (!this.addForm.contact_phone) {
        this.$message.error("请输入联系方式");
        return false;
      }
      this.titles = "请设置缴费标准";
      this.firstpage = false;
      this.orderpage = false;
      this.secondpage = true;
    },
    secondorderress() {
      if ((this.titles = "预约设置")) {
        if (!this.addForm.appoint_price) {
          this.$message.error("请输入预约费");
          return false;
        }
        // if (!this.addForm.appoint_time) {
        //   this.$message.error("请自定义车主可提前预约的时间");
        //   return false;
        // }
        // if (!this.addForm.cancel_appoint_time) {
        //   this.$message.error("请自定义车主可提前取消的时间");
        //   return false;
        // }
        // if (!this.addForm.multiple) {
        //   this.$message.error("请输入超出时间收费倍数");
        //   return false;
        // }
      }
      this.titles = "请设置缴费标准";
      this.orderpage = false;
      this.secondpage = true;
    },
    // 时段免费
    feemodel() {
      //   if(this.addForm.fee_model=== 0){
      //     this.addForm.all_charge_price = ''
      //     this.addForm.time_interval = 'NO'
      //     this.addForm.day_price = ''
      //     this.addForm.night_price = ''
      //     this.addForm.big_car_price = ''
      //     this.addForm.small_car_price = ''
      //     this.addForm.is_car_type='NO'
      //     this.addForm.big_day_price = ''
      //     this.addForm.big_night_price = ''
      //     this.addForm.small_day_price = ''
      //     this.addForm.small_night_price = ''
      //     this.addForm.begin_time = ''
      //     this.addForm.end_time = ''
      //     this.addForm.period_charge_price = ''
      //     this.addForm.big_part_price = ''
      //     this.addForm.small_part_price = ''
      //     this.addForm.free_parking_time = ''
      //     this.addForm.toplimit_price = ''
      //     this.secondsonpage = false
      //     this.thirdsonpage = false
      //   }else if(this.addForm.fee_model=== 1){
      //     this.addForm.begin_time = ''
      //     this.addForm.end_time = ''
      //     this.addForm.is_car_type='NO'
      //     this.switchCar()
      //     this.addForm.period_charge_price = ''
      //     this.addForm.big_part_price = ''
      //     this.addForm.small_part_price = ''
      //     this.addForm.free_parking_time = ''
      //     this.addForm.toplimit_price = ''
      //     this.thirdsonpage = false
      //     this.secondsonpage = true
      //     this.switchTime()
      //   }else if(this.addForm.fee_model=== 2){
      //     this.addForm.is_car_type='NO'
      //     this.switchCar()
      //     this.addForm.all_charge_price = ''
      //     this.addForm.time_interval = 'NO'
      //     this.addForm.day_price = ''
      //     this.addForm.night_price = ''
      //     this.addForm.big_car_price = ''
      //     this.addForm.small_car_price = ''
      //     this.addForm.big_day_price = ''
      //     this.addForm.big_night_price = ''
      //     this.addForm.small_day_price = ''
      //     this.addForm.small_night_price = ''
      //     this.addForm.free_parking_time = ''
      //     this.addForm.toplimit_price = ''
      //     this.secondsonpage = false
      //     this.thirdsonpage = true
      //   }
    },
    // 预约费设置返回
    orderback() {
      this.orderpage = false;
      this.addForm.appoint_price = "";
      this.addForm.appoint_time = "";
      this.addForm.cancel_appoint_time = "";
      this.addForm.multiple = "";
      this.titles = "添加";
      this.firstpage = true;
    },
    // 请设置缴费标准返回
    secondback() {
      this.secondpage = false;
      if (this.addForm.is_appoint === 1) {
        this.titles = "预约设置";
        this.orderpage = true;
      } else {
        this.titles = "添加";
        this.firstpage = true;
      }
      this.addForm.fee_model = 0;
      this.feemodel();
    },
    // 区分车型
    switchCar() {
      if (this.addForm.is_car_type === 1) {
        this.iScartype = true;
      } else {
        this.iScartype = false;
      }
    },
    // 时段区分
    switchTime() {
      if (this.addForm.time_interval === 1) {
        this.iSTime = true;
      } else {
        this.iSTime = false;
      }
    },
    // 预约自定义
    zdy() {
      this.zdyshow1 = true;
    },
    // 预约自定义
    zdy2() {
      this.zdyshow2 = true;
    },
    // 添加
    addNotice() {
      this.titles = "添加";
      this.dialogVisible = true;
    },
    editParking() {
      this.is_Ready = false;
      this.titles = "编辑";
      this.addForm = this._.cloneDeep(this.detailList);
      console.log(this.addForm);
      //   this.addForm={
      //     parking_lot_type:this.detailList.parking_lot_type,
      //     proportion:this.detailList.proportion,
      //     contact_phone:this.detailList.contact_phone,
      //     longitude:this.detailList.longitude,
      //     latitude:this.detailList.latitude,
      //     is_appoint:this.detailList.is_appoint,
      //     img_url:'',
      //     appoint_price:this.detailList.appoint_price,
      //     parking_lot_name:this.detailList.parking_lot_name,
      //     all_charge_price:this.detailList.all_charge_price,
      //     day_price:this.detailList.day_price,
      //     night_price:this.detailList.night_price,
      //     big_day_price:this.detailList.big_day_price,
      //     big_night_price:this.detailList.big_night_price,
      //     small_day_price:this.detailList.small_day_price,
      //     small_night_price:this.detailList.small_night_price,
      //     big_car_price:this.detailList.big_car_price,
      //     small_car_price:this.detailList.small_car_price,
      //     begin_time:this.detailList.begin_time,
      //     end_time:this.detailList.end_time,
      //     big_part_price:this.detailList.big_part_price,
      //     small_part_price:this.detailList.small_part_price,
      //     period_charge_price:this.detailList.period_charge_price,
      //     business_begin_time:this.detailList.business_begin_time,
      //     business_end_time:this.detailList.business_end_time,
      //     parking_lot_address:this.detailList.parking_lot_address,
      //     appoint_time:this.detailList.appoint_time.toString(),
      //     cancel_appoint_time:this.detailList.cancel_appoint_time.toString(),
      //     multiple:this.detailList.multiple,
      //     fee_model:this.detailList.fee_model,
      //     is_car_type:this.detailList.is_car_type,
      //     time_interval:this.detailList.time_interval,
      //     toplimit_price:this.detailList.toplimit_price,
      //     free_parking_time:this.detailList.free_parking_time,
      //   }
      if (
        this.addForm.appoint_time === "5" ||
        this.addForm.appoint_time === "10" ||
        this.addForm.appoint_time === "20" ||
        this.addForm.appoint_time === "30"
      )
        this.zdyshow1 = false;
      else this.zdyshow1 = true;
      if (
        this.addForm.cancel_appoint_time === "5" ||
        this.addForm.cancel_appoint_time === "10" ||
        this.addForm.cancel_appoint_time === "20" ||
        this.addForm.cancel_appoint_time === "30"
      )
        this.zdyshow2 = false;
      else this.zdyshow2 = true;
      if (this.addForm.fee_model === 0) {
        this.secondsonpage = false;
        this.thirdsonpage = false;
      } else if (this.addForm.fee_model === 1) {
        this.switchCar();
        this.thirdsonpage = false;
        this.secondsonpage = true;
        this.switchTime();
      } else if (this.addForm.fee_model === 2) {
        this.switchCar();
        this.secondsonpage = false;
        this.thirdsonpage = true;
      }
      this.dialogVisible = true;
    },
    back() {
      this.formAge = !this.formAge;
      this.getParkingLotList();
      this.tableDataParking = [];
      this.detailList = {};
      this.areaoneList = {};
    },
    handleClick() {},
    handleCloselocate() {
      this.locate = false;
    },
    //关闭添加子页面时
    handleClose(done) {
      this.dialogVisible = false;
      this.firstpage = true;
      this.orderpage = false;
      this.secondpage = false;
      this.secondsonpage = false;
      this.zdyshow1 = false;
      this.zdyshow2 = false;
      this.addForm = {
        parking_lot_type: 0,
        // proportion: "",
        contact_phone: "",
        longitude: "",
        latitude: "",
        is_appoint: 1,
        img_url: "",
        appoint_price: "",
        parking_lot_name: "",
        all_charge_price: "",
        day_price: "",
        night_price: "",
        big_day_price: "",
        big_night_price: "",
        small_day_price: "",
        small_night_price: "",
        big_car_price: "",
        small_car_price: "",
        begin_time: "",
        end_time: "",
        big_part_price: "",
        small_part_price: "",
        period_charge_price: "",
        business_begin_time: "",
        business_end_time: "",
        parking_lot_address: "",
        appoint_time: "",
        cancel_appoint_time: "",
        multiple: "",
        fee_model: 0,
        is_car_type: 0,
        time_interval: 0,
        toplimit_price: "",
        free_parking_time: "",
      };
      this.fileList = [];
      this.iScartype = false;
      this.is_Ready = true;
    },
    handleCloses() {
      this.dialogVisibleAddParking = false;
      this.addParkingList = {};
      this.is_bulk_import = true;
    },
    handleCloseArea() {
      this.dialogVisibleArea = false;
      this.addAreaList = {};
    },
    //时间戳转时间
    dateFormat(date, fmt = "yyyy-MM-dd hh:mm:ss") {
      if (date === "") {
        return "";
      } else {
        date = new Date(date * 1000);
        const o = {
          "M+": date.getMonth() + 1, // 月份
          "d+": date.getDate(), // 日
          "h+": date.getHours(), // 小时
          "m+": date.getMinutes(), // 分
          "s+": date.getSeconds(), // 秒
          "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
          S: date.getMilliseconds(), // 毫秒
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        }
        for (const k in o) {
          if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
          }
        }
        return fmt;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.amap-demo {
  height: 400px;
}
.flex >>> .el-dialog__title {
  margin-left: 15px;
}
/* .areathing> >>>.el-button--primary.is-plain{
  } */
.flex >>> .el-tabs__nav-wrap::after,
.flex >>> .el-tabs__active-bar.is-top {
  width: 0% !important;
}
.flex >>> .el-tabs__item.is-top.is-active {
  font-size: 18px;
}
.flex >>> .el-upload-list__item.is-ready {
  width: 100px;
  height: 80px;
}
.flex >>> .el-upload.el-upload--picture-card {
  width: 100px;
  height: 80px;
}
.flex >>> .el-upload.el-upload--picture-card > i {
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.flex >>> .el-date-editor--datetimerange.el-input__inner {
  width: 350px;
}
.margintop {
  margin-top: 20px;
}
.marginbottom {
  margin-bottom: 20px;
}
.vfor {
  width: 20%;
  float: left;
  margin: 0 4% 2% 0;
  height: 280px;
  padding: 15px 5px;
  font-size: 13px;
}
.center {
  text-align: center;
  margin-bottom: 15px;
}
.addres {
  margin-left: 10px;
}
.addre {
  float: right;
  margin-right: 30px;
  color: #00bfff;
  font-size: 14px;
  cursor: pointer;
}
.addredel {
  float: right;
  margin-right: 30px;
  color: red;
  font-size: 14px;
  cursor: pointer;
}
.iconstop {
  margin: 10px 0 0 10px;
}
.icons {
  margin: 5px 0 0 20px;
}
.marginleft {
  margin-left: 30px;
  margin-top: -20px;
}
.fontweight {
  font-weight: 600;
}
.el-icon-edit {
  font-size: 18px;
}
.zdy {
  text-decoration: underline;
  cursor: pointer;
  color: #00bfff;
}
.el-icon-back {
  font-weight: 500;
  font-size: 25px;
}
.yjxq {
  font-weight: 500;
  font-size: 18px;
}
.bord {
  margin-bottom: 30px;
  font-size: 15px;
  letter-spacing: 1px;
}
.floatRight {
  float: right;
  margin-right: 40px;
}
.xiexian {
  display: flex;
  width: 100px;
  margin: -63px 0 0 -115px;
}
.xiexians {
  display: flex;
  width: 100px;
  margin: -63px 0 0 -15px;
}
.xiexianson {
  font-weight: 800;
  font-size: 20px;
  cursor: pointer;
}
.deldanger {
  color: red;
  font-size: 13px;
  letter-spacing: 1px;
}
.delblue {
  color: #00bfff;
  letter-spacing: 1px;
}
.areaclass {
  cursor: pointer;
  color: #696969;
  float: left;
  font-size: 13px;
  border: 1px solid #696969;
  padding: 4px 15px;
  margin: 0 5px 2px 0;
  border-radius: 4px;
}
.areaclass.active {
  color: white;
  background: #409eff;
}
.bd-map{
    width: 100%;
    height: 60vh;
    user-select: none;
}
.map-title{
    display: flex;
    align-items: center;
    color: #fff;
    .title-text{
        font-size: 18px;
    }
    .point-info{
        flex: 1;
        text-align: center;
    }
}
.map-input{
    padding: 0 10px;
    height: 50px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.map-result{
    position: absolute;
    left: 10px;
    top: 50px;
    min-height: 150px;
    width: 240px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid teal;
    background-color: #fff;
    &::after, &::before{
        content: '';
        display: block;
        position: absolute;
        left: 15px;
        top: -19px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color: #fff;
    }
    &::before{
        top: -20px;
        border-bottom-color: teal;
    }
}
</style>
<style>
.tangram-suggestion-main{
    z-index: 9999;
}

</style>